<template>
  <div>
    <ListTable :options="tableOptions" ref="tableRef" :height="500" :width="1250">
    </ListTable>
    <div id="pagination-container"></div>
  </div>

</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { ListTable } from "@visactor/vue-vtable";

const tableOptions = ref({});
const tableRef = ref(null);

onMounted(async () => {
  const records = generatePersons(1000);
  const columns = [
    { field: "id", title: "关联方名称", width: 200, },
    { field: "email1", title: "关联交易类型", width: 140, },
    { field: "hobbies", title: "申请金额（元）", width: 150, },
    { field: "birthday", title: "已使用金额（元）", width: 160, },
    { field: "sex", title: "剩余可用金额（元）", width: 180, },
    {
      field: "tel", title: "已使用额度占比", width: 180,
      sort: true,
      style: {
        color(args) {
          if (args.dataValue == '1000') return 'red';
          return 'black';
        }
      }
    },
    { field: "work", title: "剩余额度占比", width: 180, sort: true, },
    {
      field: "city", title: "操作", fieldFormat: (record) => "查看", width: 80, cellType: 'link', linkJump: true,
      linkTarget: '_self',
      templateLink: '/dashboardDetail/{id}'
    },
  ];
  const options = {
    records,
    columns,
    pagination: {
      currentPage: 0,
      perPageCount: 100,
    },
  };
  tableOptions.value = options;
  await nextTick();
  createPagination(10, 1, tableRef.value.vTableInstance);

});

const generatePersons = (count) => {
  return Array.from(new Array(count)).map((_, i) => {
    const first = 'xxx';
    const last = '222';
    return {
      id: `${i + 1}idya`,
      email1: `${first}_${last}@xxx.com`,
      name: first,
      lastName: last,
      hobbies: [1, 2, 3][i] || '1000',
      birthday: [1, 2, 3][i] || '1000',
      tel: [1, 2, 3][i] || '1000',
      sex: i % 2 === 0 ? "boy" : "girl",
      work: i % 2 === 0 ? "back-end engineer" : "front-end engineer",
      city: "beijing",
    };
  });
};

// 创建分页组件的函数
function createPagination(totalPages, currentPage, tableInstance) {
  const container = document.getElementById("pagination-container");
  container.innerHTML = "";

  // 创建一个无序列表作为分页的容器
  const ul = document.createElement("ul");
  ul.className = "pagination";

  // 为每一页创建一个列表项
  for (let i = 1; i <= totalPages; i++) {
    // 创建列表项
    const li = document.createElement("li");
    // 创建链接
    const a = document.createElement("a");
    a.innerText = i;
    a.href = "?page=" + i;
    a.className = i === currentPage ? "active" : "";
    a.onclick = function (event) {
      event.preventDefault();
      // 重新创建分页组件
      createPagination(totalPages, i, tableInstance);
      tableInstance.updatePagination({
        currentPage: i - 1,
      });
    };
    li.appendChild(a);
    ul.appendChild(li); // 将列表项添加到无序列表中
  }

  container.appendChild(ul); // 将分页组件添加到容器中
}

</script>

<style>
.pagination {
  margin-top: 10px;
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: flex-end;
}

.pagination li {
  margin: 0 5px;
}

.pagination a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #007bff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

.pagination a:hover {
  background-color: #e9ecef;
  color: #0056b3;
}

.pagination a.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}
</style>
